import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import BackButton from '../../components/BackButton';
import './index.css';

const LoginPage: React.FC = () => {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleLogin = async () => {
    if (!formData.username || !formData.password) {
      alert('请填写完整信息');
      return;
    }

    setIsLoading(true);
    
    try {
      // 模拟登录请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 登录成功后跳转
      navigate('/mall/', { replace: true });
    } catch (error) {
      alert('登录失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  const handleGetVerificationCode = () => {
    alert('获取验证码功能待实现');
  };

  const handleForgotPassword = () => {
    alert('忘记密码功能待实现');
  };

  const handleRegister = () => {
    navigate('/mall/register');
  };

  return (
    <div className="login-page">
      {/* 背景装饰 */}
      <div className="login-page__background">
        <div className="login-page__bg-shape login-page__bg-shape--top"></div>
        <div className="login-page__bg-shape login-page__bg-shape--bottom"></div>
      </div>

      {/* 返回按钮 */}
      <div className="login-page__header">
        <BackButton />
      </div>

      {/* 登录表单 */}
      <div className="login-page__content">
        <div className="login-page__welcome">
          <h1 className="login-page__title">欢迎回来！</h1>
        </div>

        <div className="login-page__form">
          <div className="login-page__form-item">
            <div className="login-page__label">用户名</div>
            <input
              type="text"
              className="login-page__input"
              placeholder="member"
              value={formData.username}
              onChange={(e) => handleInputChange('username', e.target.value)}
            />
          </div>

          <div className="login-page__form-item">
            <div className="login-page__label">密码</div>
            <input
              type="password"
              className="login-page__input"
              placeholder="••••••••"
              value={formData.password}
              onChange={(e) => handleInputChange('password', e.target.value)}
            />
          </div>

          <button 
            className={`login-page__login-btn ${isLoading ? 'login-page__login-btn--loading' : ''}`}
            onClick={handleLogin}
            disabled={isLoading}
          >
            {isLoading ? '登录中...' : '登录'}
          </button>

          <button 
            className="login-page__verification-btn"
            onClick={handleGetVerificationCode}
          >
            获取验证码
          </button>

          <div className="login-page__forgot">
            <button 
              className="login-page__forgot-btn"
              onClick={handleForgotPassword}
            >
              忘记密码？
            </button>
          </div>
        </div>

        <div className="login-page__footer">
          <span className="login-page__footer-text">还没有账号？</span>
          <button 
            className="login-page__register-btn"
            onClick={handleRegister}
          >
            马上注册
          </button>
        </div>
      </div>
    </div>
  );
};

export default LoginPage; 